<template>
  <div>
    <div class="search">
      <input v-model="queryValue" type="text" placeholder="输入城市名或拼音" />
    </div>
    <div class="search-content" ref="search" v-show="queryShow" >
      <ul>
        <li v-for="value in newArr" :key="value.id" @click="selectCity(value.name)" >{{value.name}}</li>
        <li v-show="queryShow2" >没有找到该城市，请重新输入</li>
      </ul>
    </div>
   
  </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  name: "CitySearch",
  props: {
    cities: {
      type: Object,
      default: {}
    }
  },
  methods: {
    selectCity (cityName) {
         console.log(cityName)
         this.$store.commit('changeCity', cityName)
         this.$router.push('/')
      }
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.search)
  },
  data() {
    return {
      queryValue: '',
      newArr : [],
      queryShow:false,
      queryShow2:false
    };
  },
  watch: {
    queryValue() {
      // console.log(this.queryValue == '')
      this.queryValue == '' ? this.queryShow = false : this.queryShow = true 
      this.newArr = []
      for (let key in this.cities) {
        this.cities[key].forEach(value => {
          if (
            value.name.indexOf(this.queryValue) > -1 ||
            value.spell.indexOf(this.queryValue) > -1
          ) {
            this.newArr.push(value);
          }
        });
      }
      if(this.newArr==''){
          this.queryShow2 = true
      }else{
          this.queryShow2 = false
      }
    }
  }
};
</script>
<style lang='stylus' scoped>
.search
  width: 100%
  height: 40px
  line-height: 40px
  background-color: #009FA6
  text-align: center
  input
    text-align: center
    height: 30px
    width: 95%
    border-radius: 5px
    color: #565656
    padding: 0 10px
    box-sizing: border-box
.search-content
  overflow hidden
  position absolute
  width 100%
  top 80px
  bottom 0
  z-index 1 
  background-color #fff
  ul
   li
    height: 40px
    line-height: 40px
    padding-left: 10px
    border-bottom: 1px solid #ccc
</style>